<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>productinfo</title>
    <!----------引入css----------->
    <!--引入bootstrap css-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/productinfo.css">

    <!-----------引入js----------->
    <!--引入jquery-->
    <script src="js/jquery-3.6.0.min.js"></script>
    <!--引入bootstrap js-->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <!--引入veu-->
    <script src="js/axios.min.js"></script>
    <script src="js/vue.js"></script>


    <link rel="stylesheet" href="css/header.css">
</head>

<body>
    <!--头-->
    <header>
        <myheader id="tagsApp" :category="category" :user="user"></myheader>
    </header>

    <div class="productinfo" id="itemsApp">
        <!--导航条-->
        <nav class="nav">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12 breadcrumb">
                        <span class="breadcrumb-text"><a href="index.html">茶叶</a></span>
                        <span class="breadcrumb-text"> &gt; </span>
                        <span class="breadcrumb-text"><a v-text="items.catName" @click="">绿茶</a></span>
                        <span class="breadcrumb-text"> &gt; </span>
                        <span class="breadcrumb-text" v-text="items.itemsName">西湖龙井特级</span>
                    </div>
                </div>
            </div>
        </nav>

        <!--主体-->
        <main>
            <div class="container">
                <!--主体左半部分（商品图片）-->
                <div class="col-md-5 productimage col-md-offset-1">
                    <img src="image/1.png" :src="items.itemsImage">
                </div>

                <!--主体又半部分（商品信息及购买）-->
                <div class="col-md-5">
                    <!--商品名称-->
                    <div >
                        <h1 v-text="items.itemsName">西湖龙井特级</h1>
                    </div>
                    <div class="fg-div small"></div>
                    <!--商品价格-->
                    <div>
                        <p class="price">￥<span v-text="items.unitPrice"></span></p>
                    </div>
                    <!--商品简介-->
                    <div>
                        <p class="description">商品分类：
                            <span v-text="items.catName">饮茶不但是传统饮食文化，同时，由于茶中含有多种抗氧化物质与抗氧化营养素，
                            对于消除自由基有一定的效果。因此喝茶也有助防老，具养生保健功能，每天喝三两杯茶可起到防老的作用。
                            茶叶中含有多种维生素和氨基酸，喝茶对于清油解腻，增强神经兴奋以及消食利尿也具有一定的作用。
                            </span>

                        </p>
                    </div>
                    <!--商品编号-->
                    <div>
                        <div class="solid"></div>
                        <span class="elseinfo">商品规格： <span v-text="items.specification">FEWQT9514</span> </span>
                    </div>
                    <!--商品分类-->
                    <div>
                        <div class="solid"></div>
                        <span class="elseinfo">分类：<span v-text="items.catName">绿茶</span> </span>
                    </div>
                    <!--累计销售-->
                    <div>
                        <div class="solid"></div>
                        <span class="elseinfo">累计销售：<span v-text="items.sellCounts">888</span> </span>
                    </div>
                    <!--添加购物车按钮功能-->
                    <div class="fun">
                        <table>
                            <tr>
                                <td>
                                    <!--加入购物车-->
                                    <button class="btn btn-success btn-lg" @click="addCart(items.itemsId)">加入购物车</button>
                                </td>
                                <td style="width: 20px">
                                    <!--空盒子-->
                                </td>
                                <td>
                                    <!--数量加减-->
                                    <div class="quantity buttons_added">
                                        <input type="button" value="-" class="reduce">
                                        <input type="text" value="1"  class="input-text">
                                        <input type="button" value="+" class="add">
                                    </div>
                                </td>
                            </tr>
                        </table>


                    </div>
                </div>

                <!--主体下半部分（商品详情）-->
                <div class="col-md-10 col-md-offset-1">
                    <div class="fg-div" ></div>
                    <ul class="tabs">
                        <li class="description_tab active">
                            描述
                        </li>
                    </ul>
                    <div style="letter-spacing: 1px; line-height: 24px;">
                        <span style="font-size: 15px; line-height: 26px" v-html="items.itemsContent">
                            饮茶不但是传统饮食文化，同时，由于茶中含有多种抗氧化物质与抗氧化营养素，对于消除自由基有一定的效果。
                            因此喝茶也有助防老，具养生保健功能，每天喝三两杯茶可起到防老的作用。
                            茶叶中含有多种维生素和氨基酸，喝茶对于清油解腻，增强神经兴奋以及消食利尿也具有一定的作用。
                            但并不是喝得越多越好，也不是所有的人都适合喝茶。一般来说，每天1-2次，每次3-5克、400毫升的饮量是比较适当的。
                            一般，人们说喝茶还指喝水。
                        </span>
                    </div>
                    <div class="bg-image">
                        <img src="image/2.png" style="width: 100%;margin-top: 15px">
                    </div>

                </div>
            </div>
        </main>
        <!--页脚-->

        <footer></footer>
    </div>
</body>
<script src="my/js/items.js"></script>
<script src="my/js/header.js"></script>
<script src="my/js/headerApp.js"></script>

<script>
        /*实现商品详情页购物车的加减操作*/
        //获得value值
        let i=$(".input-text").val();

        //点击+号数量+1
        $(".add").click(function () {
            i++;
            $(".input-text").val(i);
        }),
        //点击-号数量-1，小于1时为1
        $(".reduce").click(function (){
            i--;
            $(".input-text").val(i);
            if (i < 1) {
                $(".input-text").val(1);
                i = 1;
            }
        })

        $(".input-text").on('input',function () {
            console.log($(".input-text").val())
            i=$(".input-text").val();
        })

</script>
</html>